<template>
  <el-form-item :label="label" :required="isRequired">
      <el-col :span="11">
        <el-form-item :prop="startTimeName">
          <el-date-picker
            v-model="startT"
            :type="dateType.date"
            placeholder="选择日期"
            :format="dateType.format"
            :value-format="dateType.valueFormat"
            :picker-options="pickerBegin"
            @change="$emit('update:startTime',startT)">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col class="text-center" :span="2"><span>-</span></el-col>
      <el-col :span="11">
        <el-form-item :prop="endTimeName">
          <el-date-picker
            v-model="endT"
            :type="dateType.date"
            placeholder="选择日期"
            :format="dateType.format"
            :value-format="dateType.valueFormat"
            :picker-options="pickerEnd"
            @change="$emit('update:endTime',endT)">
          </el-date-picker>
        </el-form-item>
      </el-col>
  </el-form-item>
</template>

<script>
  export default {
    name: "jxf-Date",
    props: {
      isRequired:{
        type:Boolean,
        default:false
      },
      label:{
        type: String,
        default:"活动时间："
      },
      startTime:{
        type:String,
        default:""
      },
      endTime:{
        type:String,
        default:""
      },
      startTimeProp: {
        type: String,
        default: 'startTime'
      },
      endTimeProp: {
        type: String,
        default: 'endTime'
      },
      // 时间选择类型
      dateType:{
        type:Object,
        default: () => {
          return {
            type:"date",
            format: "yyyy 年 MM 月 dd 日",
            valueFormat: "yyyy-MM-dd"
          }
        }
      },
      // 时间限制 参数值：
      // beforeToday：今天及今天之前的日期；
      // afterToday：今天及今天之后的日期；
      // noLimit: 不做限制
      dateLimit:{
        type:String,
        default:"beforeToday"
      }
    },
    data() {
      return {
        startTimeName: this.startTimeProp,
        endTimeName: this.endTimeProp,
        startT:this.startTime,
        endT:this.endTime,
        pickerBegin: {
          disabledDate: time => {
            if(this.dateLimit === "beforeToday"){
              let now = new Date().getTime() - 8.64e6
              if (this.endT) {
                let end = new Date(this.endT).getTime()
                return time.getTime() > end
              } else {
                return time.getTime() > now
              }
            }else if(this.dateLimit === "afterToday"){
              let now = new Date().getTime() - 8.64e7
              if (this.endT) {
                let end = new Date(this.endT).getTime()
                return time.getTime() > end || time.getTime() < now
              } else {
                return time.getTime() < now
              }
            }else{
              if (this.endT) {
                let end = new Date(this.endT).getTime()
                return time.getTime() >= end
              }
            }
          }
        },
        pickerEnd: {
          disabledDate: time => {
            if(this.dateLimit === "beforeToday"){
              let now = new Date().getTime() - 8.64e6
              if (this.startT) {
                let beginTime = new Date(this.startT).getTime() - 8.64e7
                return time.getTime() < beginTime || time.getTime() > now
              } else {
                return time.getTime() > now
              }
            }else if(this.dateLimit === "afterToday"){
              let now = new Date().getTime() - 8.64e7
              if (this.startT) {
                let start = new Date(this.startT).getTime() - 8.64e7
                return time.getTime() < start
              } else {
                return time.getTime() < now
              }
            }else{
              if (this.startT) {
                let start = new Date(this.startT).getTime()
                return time.getTime() <= start
              }
            }
          }
        }
      }
    },
    watch:{
      startTime(){
        this.startT = this.startTime
      },
      endTime(){
        this.endT = this.endTime
      }
    },
    methods:{
    },
    created(){
    }
  }
</script>

<style lang="scss" scoped>

</style>
